import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';

export default function NotFound() {
  const { t } = useTranslation();

  return (
    <>
      <Helmet>
        <title>{t('404.title', '页面未找到 - 豆豆Pay')}</title>
        <meta name="description" content={t('404.description', '抱歉，您访问的页面不存在。请返回首页或浏览其他页面。')} />
        <meta name="robots" content="noindex, follow" />
      </Helmet>

      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center px-4">
        <div className="max-w-md w-full text-center">
          {/* 404 Number */}
          <div className="mb-8">
            <h1 className="text-8xl font-bold text-indigo-600 mb-2">404</h1>
            <div className="w-24 h-1 bg-indigo-600 mx-auto rounded-full"></div>
          </div>

          {/* Error Message */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">
              {t('404.heading', '页面未找到')}
            </h2>
            <p className="text-gray-600 leading-relaxed">
              {t('404.message', '抱歉，您访问的页面不存在。这可能是由于链接错误或页面已被移动。')}
            </p>
          </div>

          {/* Action Buttons */}
          <div className="space-y-4">
            <Link to="/">
              <button className="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center gap-2">
                <i className="fa-solid fa-house w-4 h-4"></i>
                {t('404.backHome', '返回首页')}
              </button>
            </Link>

            <button
              onClick={() => window.history.back()}
              className="w-full bg-white hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-medium border border-gray-300 transition-colors duration-200 flex items-center justify-center gap-2"
            >
              <i className="fa-solid fa-arrow-left w-4 h-4"></i>
              {t('404.goBack', '返回上一页')}
            </button>
          </div>

          {/* Quick Links */}
          <div className="mt-12">
            <p className="text-sm text-gray-500 mb-4">
              {t('404.quickLinks', '或者浏览以下页面：')}
            </p>
            <div className="grid grid-cols-2 gap-3 text-sm">
              <Link
                to="/digital-payment"
                className="text-indigo-600 hover:text-indigo-800 hover:underline"
              >
                {t('nav.digitalPayment', '数字支付')}
              </Link>
              <Link
                to="/cross-border-payment"
                className="text-indigo-600 hover:text-indigo-800 hover:underline"
              >
                {t('nav.crossBorderPayment', '跨境支付')}
              </Link>
              <Link
                to="/about/introduction"
                className="text-indigo-600 hover:text-indigo-800 hover:underline"
              >
                {t('nav.about', '关于我们')}
              </Link>
              <Link
                to="/about/contact"
                className="text-indigo-600 hover:text-indigo-800 hover:underline"
              >
                {t('nav.contact', '联系我们')}
              </Link>
            </div>
          </div>

          {/* Contact Info */}
          <div className="mt-8 pt-8 border-t border-gray-200">
            <p className="text-xs text-gray-500">
              {t('404.support', '如有问题，请联系我们的客服团队')}
            </p>
          </div>
        </div>
      </div>
    </>
  );
}
